/**
 * WebGLRenderingContext.vertexAttribPointer()  参数解析
 * 
index
A GLuint (en-US) specifying the index of the vertex attribute that is to be modified. 指定要修改的顶点属性的索引。

size
A GLint (en-US) specifying the number of components per vertex attribute. Must be 1, 2, 3, or 4. 指定每个顶点属性的组成数量，必须是 1，2，3 或 4。

type
A GLenum (en-US) specifying the data type of each component in the array. Possible values: 指定数组中每个元素的数据类型可能是：

gl.BYTE: signed 8-bit integer, with values in [-128, 127] 有符号的 8 位整数，范围 [-128, 127]
gl.SHORT: signed 16-bit integer, with values in [-32768, 32767] 有符号的 16 位整数，范围 [-32768, 32767]
gl.UNSIGNED_BYTE: unsigned 8-bit integer, with values in [0, 255] 无符号的 8 位整数，范围 [0, 255]
gl.UNSIGNED_SHORT: unsigned 16-bit integer, with values in [0, 65535] 无符号的 16 位整数，范围 [0, 65535]
gl.FLOAT: 32-bit IEEE floating point number 32 位 IEEE 标准的浮点数
When using a WebGL 2 context, the following values are available additionally: 使用 WebGL2 版本的还可以使用以下值：
gl.HALF_FLOAT: 16-bit IEEE floating point number 16 位 IEEE 标准的浮点数
normalized
A GLboolean (en-US) specifying whether integer data values should be normalized into a certain range when being casted to a float. 当转换为浮点数时是否应该将整数数值归一化到特定的范围。

For types gl.BYTE and gl.SHORT, normalizes the values to [-1, 1] if true. 对于类型gl.BYTE和gl.SHORT，如果是 true 则将值归一化为 [-1, 1]
For types gl.UNSIGNED_BYTE and gl.UNSIGNED_SHORT, normalizes the values to [0, 1] if true. 对于类型gl.UNSIGNED_BYTE和gl.UNSIGNED_SHORT，如果是 true 则将值归一化为 [0, 1]
For types gl.FLOAT and gl.HALF_FLOAT, this parameter has no effect. 对于类型gl.FLOAT和gl.HALF_FLOAT，此参数无效
stride
一个 GLsizei (en-US)，以字节为单位指定连续顶点属性开始之间的偏移量 (即数组中一行长度)。不能大于 255。如果 stride 为 0，则假定该属性是紧密打包的，即不交错属性，每个属性在一个单独的块中，下一个顶点的属性紧跟当前顶点之后。

offset
GLintptr (en-US)指定顶点属性数组中第一部分的字节偏移量。必须是类型的字节长度的倍数。
 */


var vs =
    "attribute vec4 a_Position;\n" +
    "uniform mat4 u_ViewMatrix;\n" +
    "attribute vec4 a_Color;\n" +
    "varying vec4 v_Color;\n" +
    "void main(){\n" +
    "   gl_Position = u_ViewMatrix * a_Position;\n" +
    "   v_Color = a_Color;\n" +
    "}\n";

var fs =
    "precision mediump float;\n" +
    "varying vec4 v_Color;\n" +
    "void main(){\n" +
    "   gl_FragColor = v_Color;\n" +
    "}\n";

function main(){
    var canvas = document.getElementById("canvas_id");
    var gl = getWebGLContext(canvas);
    if (!gl) return console.error("not find webgl");
    if (!initShaders(gl, vs, fs)) console.error("init shader fail");
    var u_ViewMatrix = gl.getUniformLocation(gl.program, "u_ViewMatrix");
    var viewMatrix = new Matrix4();
    var startX = 0;
    updateViewMatrix(gl, u_ViewMatrix, viewMatrix, startX);

    initShaderBuffers(gl);
    drawCanvas(gl); 


    document.onkeydown = (ev)=>{
        if(ev.keyCode == 65){
            startX -= 0.1;
        }
        if(ev.keyCode == 68){
            
            startX += 0.1;
        }
        updateViewMatrix(gl, u_ViewMatrix, viewMatrix, startX);
        drawCanvas(gl); 
    }

    function updateViewMatrix(gl, u_ViewMatrix, viewMatrix, x) {
        /**
         * 0   1    2   表示视点的位置
         * 0.2,0.25,0.25
         * 3   4    5   表示被查看的物体
         * 6   7    8   表示上方向
         */
        viewMatrix.setLookAt(0.2,0.25,0.25, x,0.0,0.0 , 0.0,1.0,0.0);
        gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
    }
}

function initShaderBuffers(gl){
    var posBuffer = gl.createBuffer();
    var colorBuffer = gl.createBuffer();
    if(! posBuffer || ! colorBuffer) console.error("create buffer fail");
    var posAndColorArr = new Float32Array([
        -0.4,0.2,0.2,  1.0,0.4,0.4,
        -0.4,-0.7,0.2,  0.4,0.4,0.4,
        0.4,0.0,0.2,  1.0,0.4,0.4,

        -0.4,0.4,0.4,  0.4,0.4,0.4,
        -0.4,-0.4,0.4,  0.4,1.0,0.4,
        0.4,0.0,0.4,  0.4,0.4,0.4,

        -0.4,0.3,0.6,  0.4,0.4,0.4,
        -0.4,-0.5,0.6,  0.4,0.4,1.0,
        0.4,0.0,0.6,  0.4,0.4,0.4,
    ]);

    var size = posAndColorArr.BYTES_PER_ELEMENT;

    
    var a_Position = gl.getAttribLocation(gl.program, "a_Position");
    var a_Color = gl.getAttribLocation(gl.program, "a_Color");
    

    gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, posAndColorArr, gl.STATIC_DRAW);
    gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, size * 6, 0);
    gl.enableVertexAttribArray(a_Position);

    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, posAndColorArr, gl.STATIC_DRAW);
    gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, size * 6, size*3);
    gl.enableVertexAttribArray(a_Color);
}

function drawCanvas(gl){
    gl.clearColor(0.0,0.0,0.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 9);
}

